<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}
    <link rel="stylesheet" href="__STATIC_URL__/static/css/setcard.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/coupon.css"/>



    <style>
        .ng-scope input {
            width: 232px;
            margin-left: 5px;
            opacity: 1;
        }

        .addcate,.addcdlist{
            height: 34px;
            line-height: 34px;
            border: 1px solid #4cd0ff;
            text-align: center;
            cursor: pointer;
            background-color: #fff;
            display: inline-block;
            color:#4cd0ff;
            margin-right: 8px;
            padding:0 3px;
        }
        @media (min-width: 768px) {
            .modal-dialog {
                width: 600px;
                margin: 200px auto;
            }
        }

        .ng-scope input {
            width: 70%;
            opacity: 1;
            margin: 5px 0;
            padding: 0 10px;
            position: initial;
        }
        .form-group .col-sm-8{
            padding-left:0;
        }
        .form-group {
            margin-bottom: 1px;
        }
        .delcate{
            color: #ff4d4d;
        }
    </style>
</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">

        <div class="panel mgl15 mgr15">
            <div class="panel-body">
                <!--路径导航-->
                <ol class="breadcrumb">
                    <li>当前位置是&nbsp;:</li>
                    <li>
                        <a href="{:url('cardgifts/cardgiftracklist')}">货架管理</a>
                    </li>
                    <li class="active" style="color: #02b87f;">货架管理</li>
                </ol>
                <div>
                    <div id="myAlert1" class="alert alert-success" style="margin:10px 20px;">
                        <a href="#" class="close" data-dismiss="alert">&times;</a>
                        <strong>删除分类后请修改礼品卡集的分类否则无法发布！</strong>
                    </div>

                    <div class="panel panel-default ng-scope">

                        <form action="" method="post" id="formcate">
                            <div class="panel-heading">
                                货架分类设置
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-12">

                                        <div class="form-horizontal" data-layout="horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label">分类：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                <div class="col-sm-8">
                                                    <div class="addcate" onclick="addlist();">添加分类</div>
                                                    <div class="addcatelist">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>

                            </div>
                            <div class="panel-footer">
                                <button class="btn btn-success" type="button" onclick="buttons()">保存</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
        {include file='public/footer'/}
    </div>
</section>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加分类</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal" data-layout="horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">标题：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                        <div class="col-sm-8">
                            <input type="hidden" name="id"   value="" >
                            <input type="text" name="" id="title1" class="form-control" maxlength="12" required placeholder="" value="" />
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="btn()">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script>
    var fllist=[];
    function addlist(){
        $("#title1").val("");
        $('#myModal').modal('show')

    }
    function btn(){
        var title=$("#title1").val();
        fllist.push(title);
        // console.log(fllist);
        flist=   " <div class='form-horizontal' data-layout='horizontal'>\n" +
            "            <div class='form-group'>\n" +
            "        <div class='col-sm-8'>\n" +
            "   <input type='text' value='"+ title+"' name='category_list[][title]' readonly='readonly'/>\n" +
            ' <div class="delcate" style="display: inline;" onclick="delfl(this)">删除\n' +
            "            </div>\n" +
            "            </div>\n" +
            "            </div>";


        $(".addcatelist").append(flist);
        $('#myModal').modal('hide')

    }
    function delfl(obj){

        $(obj).parent().remove();
        var val=$(obj).find(".ftitle").html();
        // console.log(val);
        fllist.splice($.inArray(val,fllist),1);


    }
</script>
<script>
function buttons(){
    $.ajax({
        url: "{:url('cardgifts/cardgiftrackcate')}",
        type: "post",
        data: $("#formcate").serialize(),
        success: function (data) {
            // console.log(11,data);
            if(data.code==0){
                layer.msg(data.message);
                setTimeout(function(){
                    window.location.href = "{:url('cardgifts/cardgiftrackcate')}";

                },1500)
            }else{
                layer.msg(data.message);
            }
        },
        error:function(){
            layer.msg("系统错误，请联系管理人员。");
        }
    })
}
</script>
<script>
$(function(){
    $.ajax({
        url: "{:url('cardgifts/getcardrackcate')}",
        type: "post",
        data:[],
        success: function (data) {
            // console.log(11,data);
            var datas=data.data;
            var flist="";
            for (var i = 0; i < datas.length; i++) {
                flist +=   " <div class='form-horizontal' data-layout='horizontal'>\n" +
                    "            <div class='form-group'>\n" +
                    "        <div class='col-sm-8'>\n" +
                    "   <input type='text' value='"+ datas[i].title+"' name='category_list[][title]' readonly='readonly'/>\n" +
                    ' <div class="delcate" style="display: inline;" onclick="delfl(this)">删除\n' +
                    "            </div>\n" +
                    "            </div>\n" +
                    "            </div>";

            }
            $(".addcatelist").append(flist)
        }
    })
})
</script>

</body>

</html>
